<template>
  <titleCompt title="分级次">
    <div class="tscxbox">
      <echartCompt class="tscxbox-chart" v-model="chartOption" />
    </div>
  </titleCompt>
</template>

<script>
import titleCompt from "@/views/金四决策指挥平台/components/titleCompt";
export default {
  components: {
    titleCompt,
  },
  data() {
    return {
      data:[
            "县级收入",
            "市级收入",
            "省级收入",
            "地方级收入",
            "中央级收入",
          ],
      value: [40, 50, 40, 50, 40],
    };
  },
  computed: {
    chartOption() {
      let option = {
        grid: {
          left: "2%",
          right: "15%",
          containLabel: true,
          top: "5%",
          bottom: "5%",
        },
        //backgroundColor: "#0f375f",
        barWidth: 22,
        xAxis: {
          position: "bottom",
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.2)",
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
          },
          // nameRotate: 30,
          axisLabel: {
            // formatter(val) {
            //   return val > 0 ? val / 10000 + "万" : val;
            // },
            //  改变x轴字体颜色和大小
            textStyle: {
              color: "#FFFFFF",
              fontSize: 22,
            },
          },
        },
        yAxis: {
          type: "category",
          data: this.data,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //  改变y轴颜色
            lineStyle: {
              color: "#2c4054",
            },
          },
          axisLabel: {
            //  改变y轴字体颜色和大小
            //formatter: '{value} m³ ', //  给y轴添加单位
            textStyle: {
              color: "#FFFFFF",
              fontSize: 22,
            },
          },
        },
        series: [
          {
            type: "bar",
            name: "产出",
            barWidth: this.getSize(20),
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#FFFFFF",
                    fontSize: this.getSize(16),
                    fontWeight: this.getSize(600),
                  },
                  formatter(p) {
                    return (
                      p.value +
                      ", 增长" +
                      (Math.random() * 100).toFixed(1) +
                      "%"
                    );
                    // if (p.value > 100000) {
                    //   return parseInt(p.value / 10000) + "万";
                    // } else {
                    //   return parseInt(p.value);
                    // }
                  },
                },
                color: new this.echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: "rgba(48,198,165,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(24,144,255,0)",
                  },
                ]),
                barBorderRadius: 10,
              },
            },
            data:this.value,
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.tscxbox {
  width: 100%;
  height: 100%;
  &-chart {
    padding-top: 20px;
    height: 100%;
  }
}
</style>
